我在 tynker 中编写了一个小游戏。它在那里完全正常工作。但是当我将它放入一个 html 文件并在浏览器中加载它时,它只是一个空白屏幕。我知道 tynker 做了一些厚颜无耻的事情来让你的代码在过去工作。我想知道是否需要调用一些“唤醒”函数来启动脚本。问题可能很明显,我没有那么多编程经验。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id= "myCanvas" width= "500" height= "500"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// Set up background image
var background = new Image();
background.src = "/assets2/assets/57b614dfaf9231f5688b4576.png";
background.onload = function() {
ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
start();
}
// Set up ships
var pointsBiden = 0;
var pointsTrump = 0;
var image1 = new Image();
var image1x
var image1y
var image2 = new Image();
var image2x
var image2y
var donaldstop = false;
var bidenstop = false;
var bidenTurn = false;
var trumpTurn = true;
function wait(stop,waitsecs) {
setTimeout(stop, waitsecs);
}
function donothing() {
//
}
function start(){
image1.src = "https://m-cdn.phonearena.com/images/article/78433-wide/Trump-other-GOP-presidential-hopefuls-take-shots-at-Apple-for-refusing-to-obey-a-court-order.webp";
image1.onload = function(){
image1x = 0;
image1y = 250;
ctx.drawImage(image1, image1x, image1y);
}
image2.src = "https://cdn.vanderbilt.edu/vu-news/files/20190417212447/Joe_Biden_slider-200x200.jpg"
image2.onload = function(){
image2x = 300;
image2y = 250;
ctx.drawImage(image2, image2x, image2y);
}
}
document.addEventListener("keydown", keyDownHandler);
function keyDownHandler(event){
if (event.keyCode == 32) {
donaldstop = true;
console.log("easter egg! ( your pretty cool :) )")
function fixTrump() {
donaldstop = false;
}
wait(fixTrump, 1000)
}
if (event.keyCode == 9) {
bidenstop = true;
function fixBiden() {
bidenstop = false;
}
wait(fixBiden, 1000)
}
if (donaldstop == false) {
if (event.keyCode == 37) {
image1x = image1x - 50;
} else if (event.keyCode == 38) {
image1y = image1y - 50;
} else if (event.keyCode == 39) {
image1x = image1x + 50;
} else if (event.keyCode == 40) {
image1y = image1y + 50;
}
}
// Add cases for WASD keys, to change coordinates of image2
if (bidenstop == false) {
if (event.keyCode == 87) {
image2y = image2y - 50;
} else if (event.keyCode == 65) {
image2x = image2x - 50;
} else if (event.keyCode == 83) {
image2y = image2y + 50;
} else if (event.keyCode == 68) {
image2x = image2x + 50;
}
}
if (bidenTurn == true) {
if (image1x == image2x && image1y == image2y) {
image1x = 0;
image1y = 250;
image2x = 300;
image2y = 250;
pointsBiden = pointsBiden + 1;
bidenTurn = false;
trumpTurn = true;
}
}
if (trumpTurn == true) {
if (image1x == image2x && image1y == image2y) {
image1x = 0;
image1y = 250;
image2x = 300;
image2y = 250;
pointsTrump = pointsTrump + 1;
trumpTurn = false;
bidenTurn = true;
}
}
redraw();
}
function redraw() {
if (trumpTurn == true) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
image2.src = "https://cdn.vanderbilt.edu/vu-news/files/20190417212447/Joe_Biden_slider-200x200.jpg"
image2.onload = function(){
ctx.drawImage(image2, image2x, image2y);
}
image1.src = "https://m-cdn.phonearena.com/images/article/78433-wide/Trump-other-GOP-presidential-hopefuls-take-shots-at-Apple-for-refusing-to-obey-a-court-order.webp"
image1.onload = function(){
ctx.drawImage(image1, image1x, image1y);
}
}
if (bidenTurn == true) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
image1.src = "https://m-cdn.phonearena.com/images/article/78433-wide/Trump-other-GOP-presidential-hopefuls-take-shots-at-Apple-for-refusing-to-obey-a-court-order.webp"
image1.onload = function(){
ctx.drawImage(image1, image1x, image1y);
}
image2.src = "https://cdn.vanderbilt.edu/vu-news/files/20190417212447/Joe_Biden_slider-200x200.jpg"
image2.onload = function(){
ctx.drawImage(image2, image2x, image2y);
}
}
ctx.font = "60px Verdana";
ctx.fillText(pointsBiden, image2x + 80, image2y - 100);
ctx.fillText(pointsTrump, image1x + 80, image1y - 100);
}
</script>
</body>
</html>
答案 0 :(得分:0)
问题在于您为背景提供的 src。
"/assets2/assets/57b614dfaf9231f5688b4576.png"
是相对路径。这意味着当您在 tynker 中使用它时,您的项目中可能有一个名为“assets2”的文件夹等,其中包含要用作背景的图像文件。如果您只是将代码移动到 HTML 文件,而没有将您在代码中使用的其他资源(预计会成为项目文件夹的一部分)引入,则会出现错误。
基本上,您需要将您的 HTML 文件和您的项目可能使用的任何本地图像放入您的项目文件夹中。然后你应该可以成功运行游戏了。
答案 1 :(得分:0)
您必须检查 background.src
中提供的目录,您可能提供了错误的目录,因为使用链接而不是提供的图像会起作用。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// Set up background image
var background = new Image();
background.src = "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"; // Changed this line only
background.onload = function() {
ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
start();
}
// Set up ships
var pointsBiden = 0;
var pointsTrump = 0;
var image1 = new Image();
var image1x
var image1y
var image2 = new Image();
var image2x
var image2y
var donaldstop = false;
var bidenstop = false;
var bidenTurn = false;
var trumpTurn = true;
function wait(stop, waitsecs) {
setTimeout(stop, waitsecs);
}
function donothing() {
//
}
function start() {
image1.src = "https://m-cdn.phonearena.com/images/article/78433-wide/Trump-other-GOP-presidential-hopefuls-take-shots-at-Apple-for-refusing-to-obey-a-court-order.webp";
image1.onload = function() {
image1x = 0;
image1y = 250;
ctx.drawImage(image1, image1x, image1y);
}
image2.src = "https://cdn.vanderbilt.edu/vu-news/files/20190417212447/Joe_Biden_slider-200x200.jpg"
image2.onload = function() {
image2x = 300;
image2y = 250;
ctx.drawImage(image2, image2x, image2y);
}
}
document.addEventListener("keydown", keyDownHandler);
function keyDownHandler(event) {
if (event.keyCode == 32) {
donaldstop = true;
console.log("easter egg! ( your pretty cool :) )")
function fixTrump() {
donaldstop = false;
}
wait(fixTrump, 1000)
}
if (event.keyCode == 9) {
bidenstop = true;
function fixBiden() {
bidenstop = false;
}
wait(fixBiden, 1000)
}
if (donaldstop == false) {
if (event.keyCode == 37) {
image1x = image1x - 50;
} else if (event.keyCode == 38) {
image1y = image1y - 50;
} else if (event.keyCode == 39) {
image1x = image1x + 50;
} else if (event.keyCode == 40) {
image1y = image1y + 50;
}
}
// Add cases for WASD keys, to change coordinates of image2
if (bidenstop == false) {
if (event.keyCode == 87) {
image2y = image2y - 50;
} else if (event.keyCode == 65) {
image2x = image2x - 50;
} else if (event.keyCode == 83) {
image2y = image2y + 50;
} else if (event.keyCode == 68) {
image2x = image2x + 50;
}
}
if (bidenTurn == true) {
if (image1x == image2x && image1y == image2y) {
image1x = 0;
image1y = 250;
image2x = 300;
image2y = 250;
pointsBiden = pointsBiden + 1;
bidenTurn = false;
trumpTurn = true;
}
}
if (trumpTurn == true) {
if (image1x == image2x && image1y == image2y) {
image1x = 0;
image1y = 250;
image2x = 300;
image2y = 250;
pointsTrump = pointsTrump + 1;
trumpTurn = false;
bidenTurn = true;
}
}
redraw();
}
function redraw() {
if (trumpTurn == true) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
image2.src = "https://cdn.vanderbilt.edu/vu-news/files/20190417212447/Joe_Biden_slider-200x200.jpg"
image2.onload = function() {
ctx.drawImage(image2, image2x, image2y);
}
image1.src = "https://m-cdn.phonearena.com/images/article/78433-wide/Trump-other-GOP-presidential-hopefuls-take-shots-at-Apple-for-refusing-to-obey-a-court-order.webp"
image1.onload = function() {
ctx.drawImage(image1, image1x, image1y);
}
}
if (bidenTurn == true) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
image1.src = "https://m-cdn.phonearena.com/images/article/78433-wide/Trump-other-GOP-presidential-hopefuls-take-shots-at-Apple-for-refusing-to-obey-a-court-order.webp"
image1.onload = function() {
ctx.drawImage(image1, image1x, image1y);
}
image2.src = "https://cdn.vanderbilt.edu/vu-news/files/20190417212447/Joe_Biden_slider-200x200.jpg"
image2.onload = function() {
ctx.drawImage(image2, image2x, image2y);
}
}
ctx.font = "60px Verdana";
ctx.fillText(pointsBiden, image2x + 80, image2y - 100);
ctx.fillText(pointsTrump, image1x + 80, image1y - 100);
}
</script>
</body>
</html>