HTML和Javascript按鈕不起作用
[英]HTML and Javascript button not working
問題描述
我正在嘗試制作一個網頁來存儲我剛開始時的所有游戲，並且我一直在嘗試創建一個按鈕來加載我的pong游戲，但是當我按下按鈕時，這沒什么反應
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Title</title>
<meta charset="UTF-8">
<style>
canvas {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<center>
<h1>Games</h1>
按鈕代碼
<input id="Pong" type="button" value="Pong" onclick="go();" />
傍碼
<script>
function go(){
var WIDTH = 700, HEIGHT = 600, pi = Math.PI;
var UpArrow = 38, DownArrow = 40;
var canvas, ctx, keystate;
var player, ai, ball, score;
player = {
x: null,
y: null,
width: 20,
height: 100,
update: function(){
if(keystate[UpArrow]) this.y -= 7;
if(keystate[DownArrow]) this.y += 7;
},
draw: function(){
ctx.fillRect(this.x, this.y, this.width, this.height);
}
};
ai = {
x: null,
y: null,
width: 20,
height: 100,
update: function(){
var desty = ball.y - (this.height - ball.side)*0.5;
this.y += (desty - this.y) * 0.1;
},
draw: function(){
ctx.fillRect(this.x, this.y, this.width, this.height);
}
};
ball = {
x: null,
y: null,
vel: null,
side: 20,
speed: 9,
serve: function(side){
var r = Math.random();
this.x = side===1 ? player.x : ai.x - this.side;
this.y = (HEIGHT - this.side)*r;
score.count += 1;
var phi = 0.1*pi*(1 - 2*r);
this.vel = {
x: side*this.speed*Math.cos(phi),
y: this.speed*Math.sin(phi)
};
score = {
x: null,
y: null,
count: 0,
width: 10,
height: 10,
update: function(){
Console.log(this.count);
},
draw: function(){
ctx.fillRect(this.x, this.y, this.width, this.height);
}
};
},
update: function(){
this.x += this.vel.x;
this.y += this.vel.y;
if(0 > this.y || this.y+this.side > HEIGHT){
var offset = this.vel.y < 0 ? 0 - this.y : HEIGHT - (this.y+this.side);
this.y += 2*offset;
this.vel.y *= -1;
}
var AABBIntersect = function(ax, ay, aw, ah, bx, by, bw, bh){
return ax < bx+bw && ay < by+bh && bx < ax+aw && by < ay+ah;
};
var pdle = this.vel.x < 0 ? player : ai;
if(AABBIntersect(pdle.x, pdle.y, pdle.width, pdle.height, this.x, this.y, this.side, this.side)){
this.x = pdle===player ? player.x+player.width : ai.x - this.side;
var n = (this.y + this.side - pdle.y)/(pdle.height+this.side);
var phi = 0.25*pi*(2*n - 1);
var smash = Math.abs(phi) > 0.2*pi ? 1.5 : 1;
this.vel.x = smash*(pdle === player ? 1 : -1)*this.speed*Math.cos(phi);
this.vel.y = smash*this.speed*Math.sin(phi);
}
if(0 > this.x+this.side || this.x > WIDTH){
this.serve(pdle === player ? 1 : -1);
}
},
draw: function(){
ctx.fillRect(this.x, this.y, this.side, this.side);
}
};
function main(){
canvas = document.createElement("canvas");
canvas.width = WIDTH;
canvas.height = HEIGHT;
ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
keystate = {};
document.addEventListener("keydown", function(evt) {
keystate[evt.keyCode] = true;
});
document.addEventListener("keyup", function(evt) {
delete keystate[evt.keyCode];
});
init();
var loop = function(){
update();
draw();
window.requestAnimationFrame(loop, canvas);
};
window.requestAnimationFrame(loop, canvas);
}
function init(){
player.x = player.width;
player.y = (HEIGHT - player.height)/2;
ai.x = WIDTH - (player.width + ai.width);
ai.y = (HEIGHT - ai.height)/2;
ball.serve(1);
}
function update(){
ball.update();
player.update();
ai.update();
}
function draw(){
ctx.fillRect(0, 0, WIDTH, HEIGHT);
ctx.save();
ctx.fillStyle = "#fff";
ball.draw();
player.draw();
ai.draw();
var w = 4;
var x = (WIDTH - w) * 0.5;
var y = 0;
var step = HEIGHT/15;
while (y < HEIGHT){
ctx.fillRect(x, y + step * 0.25, w, step * 0.5);
y += step;
}
ctx.restore();
}
main();
}
</script>
傍碼的結尾
</center>
</body>
</html>
1 個解決方案
解決方案1
0 已采納 2017-01-02 01:18:40
我只是采用@Xufox的解決方案並將其寫出。 還使用了JS，CSS和HTML。 請享用
function go(){ score = { x: null, y: null, count: 0, width: 10, height: 10, update: function(){ console.log(this.count); }, draw: function(){ ctx.fillRect(this.x, this.y, this.width, this.height); } }; var WIDTH = 700, HEIGHT = 600, pi = Math.PI; var UpArrow = 38, DownArrow = 40; var canvas, ctx, keystate; var player, ai, ball, score; player = { x: null, y: null, width: 20, height: 100, update: function(){ if(keystate[UpArrow]) this.y -= 7; if(keystate[DownArrow]) this.y += 7; }, draw: function(){ ctx.fillRect(this.x, this.y, this.width, this.height); } }; ai = { x: null, y: null, width: 20, height: 100, update: function(){ var desty = ball.y - (this.height - ball.side)*0.5; this.y += (desty - this.y) * 0.1; }, draw: function(){ ctx.fillRect(this.x, this.y, this.width, this.height); } }; ball = { x: null, y: null, vel: null, side: 20, speed: 9, serve: function(side){ var r = Math.random(); this.x = side===1 ? player.x : ai.x - this.side; this.y = (HEIGHT - this.side)*r; score.count += 1; var phi = 0.1*pi*(1 - 2*r); this.vel = { x: side*this.speed*Math.cos(phi), y: this.speed*Math.sin(phi) }; }, update: function(){ this.x += this.vel.x; this.y += this.vel.y; if(0 > this.y || this.y+this.side > HEIGHT){ var offset = this.vel.y < 0 ? 0 - this.y : HEIGHT - (this.y+this.side); this.y += 2*offset; this.vel.y *= -1; } var AABBIntersect = function(ax, ay, aw, ah, bx, by, bw, bh){ return ax < bx+bw && ay < by+bh && bx < ax+aw && by < ay+ah; }; var pdle = this.vel.x < 0 ? player : ai; if(AABBIntersect(pdle.x, pdle.y, pdle.width, pdle.height, this.x, this.y, this.side, this.side)){ this.x = pdle===player ? player.x+player.width : ai.x - this.side; var n = (this.y + this.side - pdle.y)/(pdle.height+this.side); var phi = 0.25*pi*(2*n - 1); var smash = Math.abs(phi) > 0.2*pi ? 1.5 : 1; this.vel.x = smash*(pdle === player ? 1 : -1)*this.speed*Math.cos(phi); this.vel.y = smash*this.speed*Math.sin(phi); } if(0 > this.x+this.side || this.x > WIDTH){ this.serve(pdle === player ? 1 : -1); } }, draw: function(){ ctx.fillRect(this.x, this.y, this.side, this.side); } }; function main(){ canvas = document.createElement("canvas"); canvas.width = WIDTH; canvas.height = HEIGHT; ctx = canvas.getContext("2d"); document.body.appendChild(canvas); keystate = {}; document.addEventListener("keydown", function(evt) { keystate[evt.keyCode] = true; }); document.addEventListener("keyup", function(evt) { delete keystate[evt.keyCode]; }); init(); var loop = function(){ update(); draw(); window.requestAnimationFrame(loop, canvas); }; window.requestAnimationFrame(loop, canvas); } function init(){ player.x = player.width; player.y = (HEIGHT - player.height)/2; ai.x = WIDTH - (player.width + ai.width); ai.y = (HEIGHT - ai.height)/2; ball.serve(1); } function update(){ ball.update(); player.update(); ai.update(); } function draw(){ ctx.fillRect(0, 0, WIDTH, HEIGHT); ctx.save(); ctx.fillStyle = "#fff"; ball.draw(); player.draw(); ai.draw(); var w = 4; var x = (WIDTH - w) * 0.5; var y = 0; var step = HEIGHT/15; while (y < HEIGHT){ ctx.fillRect(x, y + step * 0.25, w, step * 0.5); y += step; } ctx.restore(); } main(); }
canvas { position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; }
<!DOCTYPE html> <html lang = "en"> <head> <title>Title</title> <meta charset="UTF-8"> </head> <body> <center> <h1>Games</h1> <input id="Pong" type="button" value="Pong" onclick="go();" /> </center> <script type="text/javascript" src="javascript.js"></script> </body> </html>
Javascript和HTML按鈕不起作用？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.