gpt4 book ai didi

javascript - 创建简单的游戏但 Canvas 上什么也没有显示

转载 作者:行者123 更新时间:2023-11-29 15:35:23 25 4
gpt4 key购买 nike

<html>
<head>
<title>Sean Coyne</title>

<link rel="stylesheet" type="text/css" href="home.css">
<link rel="icon" type="image/x-icon" href="favicon.ico" />

</head>

<body>


<section>
<article>
<div id="logo"><img src="LogoComic.png" id="Logo"></div><br></br>

<div id="canvas">
<canvas id="c" style="border:5px solid orange" height="500" width="500"></canvas>

<p id="p1"></p>

<script>

var basket_x=100;
var basket_y=100;
var ball_x=100;
var ball_y=100;
var points=0;

// Canvas 背景色

        var c = document.getElementById("c");
var ctx = c.getContext("2d");
ctx.fillStyle = "#0000";
ctx.fillRect(0,0,500,500);

//这里是事件监听器

        mycanv.addEventListener("mousemove",seenmotion,false);

function seenmotion(e) {

//这是鼠标的代码//在 Canvas 上移动。

        var bounding_box=mycanv.getBoundingClientRect();
basket_x=(e.clientX-bounding_box.left) *
(mycanv.width/bounding_box.width);
basket_y=(e.clientY-bounding_box.top) *
(mycanv.height/bounding_box.height);
}

function start_game() {
setInterval(game_loop, 50);
}

function game_loop() {

//上面的代码每50ms调用一次,是一个//帧重绘游戏动画循环。

            mycanv.width=mycanv.width; 

//下面是绘制对象的代码

            draw_basket(basket_x,basket_y); 
draw_ball(ball_x,ball_y);

//下面是更新球位置的代码

            ball_x++;
if (ball_x>mycanv.width) {
ball_x=0;
}

//这里是碰撞检测代码

            if (collision(basket_x, basket_y, ball_x, ball_y)) {
points -= 1;
}

//这里是积分系统的代码

            points+=1

//让我们把它贴在右上角。

                var integerpoints=Math.floor(points); // make it into an integer
ctx.font="bold 24px sans-serif #fff";
ctx.fillText(integerpoints, mycanv.width-50, 50);
}

function collision(basket_x, basket_y, ball_x, ball_y) {
if(basket_y + 85 < ball_y) {
return false;
}
if (basket_y > ball_y + 91) {
return false;
}
if (basket_x + 80 < ball_x) {
return false;
}
if (basket_x > ball_x + 80) {
return false;
}

return true;
}

//游戏结束时停止游戏的代码

        function stop_game() {

}

//球的代码

        function draw_ball(x,y) {
var c = document.getElementById("c");
var ctx = c.getContext("2d");
ctx.fillStyle = "#fff";
ctx.fillRect(0,0,20,20);
}

//篮子代码

        function draw_basket(x,y) {
var basket_img=new Image();
basket_img.src="basket.png";
ctx.drawImage(basket_img,x,y);

}

start_game()

</script>



</div>

</article>
</section>

Here is what the canvas looks like when started

最佳答案

你永远不会调用 start_game()启动程序,因此程序只是等待。相反,在你的 <script> 末尾, 添加 start_game() .

提示:您的线路 mycanv.width = mycanv.width完全没有必要,相当于说 var x = 1; x = x; .

关于javascript - 创建简单的游戏但 Canvas 上什么也没有显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29853930/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com