Javascript 为什么'；三角形不清楚吗？
我有个问题，为什么三角形在这里不清晰 图为： 这是你的电话号码Javascript 为什么'；三角形不清楚吗？,javascript,Javascript,我有个问题，为什么三角形在这里不清晰 图为： 这是你的电话号码 蛇类游戏 帆布{ 位置：绝对位置； 顶部：20px； 底部：0px； 左：250px； 右：0px； } $（文档）.ready（函数（）{ var loadcount=0； var loadtotal=0； var预加载=假； var宽度=500； var高度=500； var键={}； var canvas=document.getElementById（'game'）； var ctx=canvas.getContext（
蛇类游戏
帆布{
位置：绝对位置；
顶部：20px；
底部：0px；
左：250px；
右：0px；
}
$（文档）.ready（函数（）{
var loadcount=0；
var loadtotal=0；
var预加载=假；
var宽度=500；
var高度=500；
var键={}；
var canvas=document.getElementById（'game'）；
var ctx=canvas.getContext（'2d'）；
var images=loadImages（[“spaceship.png”]）；
变量播放器={
x:null，
y:空，
宽度：40，
身高：40，
速度:5,，
更新：函数（）{
如果（键[39]）{
ctx.clearRect（this.x，this.y，this.width，this.height）；
这个.x+=这个.speed；
}
如果（键[37]）{
ctx.clearRect（this.x，this.y，this.width，this.height）；
这个.x-=这个速度；
}
如果（键[38]）{
ctx.clearRect（this.x，this.y，this.width，this.height）；
this.y-=this.speed；
}
如果（键[40]）{
ctx.clearRect（this.x，this.y，this.width，this.height）；
this.y+=this.speed；
}
//检查是否超出范围
if（this.x>宽度-this.WIDTH）{
this.x=宽度-this.WIDTH；
}
如果（此.x<0）{
这个.x=0；
}
如果（此.y>高度-15）{
y=高度-15；
}
如果（此.y<0）{
这个。y=0；
}
},
绘图：函数（）{
ctx.save（）；
ctx.beginPath（）；
ctx.strokeStyle='蓝色'
ctx.moveTo（this.x，this.y）；
ctx.lineWidth=16；
ctx.lineTo（此.x+15，此.y+25）；
ctx.lineTo（此.x-15，此.y+25）；
ctx.closePath（）；
ctx.stroke（）；
ctx.restore（）；
}
}
函数main（）{
文档.添加的事件列表器（“键控”，函数（事件）{
keys[event.keyCode]=true；
})
文件。添加事件列表器（“键控”，功能（事件）{
删除键[event.keyCode]；
})
init（）；
var循环=函数（）{
更新（）；
draw（）；
requestAnimationFrame（循环，画布）；
};
requestAnimationFrame（循环，画布）；
}
函数init（）{
player.x=（宽度/2）；
player.y=（身高/2）+150；
}
函数绘图（）{
//画正方形
ctx.beginPath（）；
ctx.moveTo（0,0）；
ctx.lineTo（0，高度）；
ctx.lineTo（高度、宽度）；
ctx.lineTo（宽度，0）
ctx.lineTo（0,0）
ctx.stroke（）；
player.draw（）；
}
函数更新（）{
player.update（）；
}
函数loadImages（图像文件）{
//初始化变量
载荷计数=0；
loadtotal=imagefiles.length；
预加载=假；
//加载图像
var loadedimages=[]；
对于（var i=0；i$（文档）.ready（函数（）{
var loadcount=0；
var loadtotal=0；
var预加载=假；
var宽度=500；
var高度=500；
var键={}；
var canvas=document.getElementById（'game'）；
var ctx=canvas.getContext（'2d'）；
var images=loadImages（[“spaceship.png”]）；
变量播放器={
x:null，
y:空，
宽度：40，
身高：40，
速度:5,，
更新：函数（）{
如果（键[39]）{
ctx.clearRect（0，0，宽度，高度）；
这个.x+=这个.speed；
}
如果（键[37]）{
ctx.clearRect（0，0，宽度，高度）；
这个.x-=这个速度；
}
如果（键[38]）{
ctx.clearRect（0，0，宽度，高度）；
this.y-=this.speed；
}
如果（键[40]）{
ctx.clearRect（0，0，宽度，高度）；
this.y+=this.speed；
}
//检查是否超出范围
if（this.x>宽度-this.WIDTH）{
this.x=宽度-this.WIDTH；
}
如果（此.x<0）{
这个.x=0；
}
如果（此.y>高度-15）{
y=高度-15；
}
如果（此.y<0）{
这个。y=0；
}
},
绘图：函数（）{
ctx.save（）；
ctx.beginPath（）；
ctx.strokeStyle='蓝色'
ctx.moveTo（this.x，this.y）；
ctx.lineWidth=16；
ctx.lineTo（此.x+15，此.y+25）；
ctx.lineTo（此.x-15，此.y+25）；
ctx.closePath（）；
ctx.stroke（）；
ctx.restore（）；
}
}
函数main（）{
文档.添加的事件列表器（“键控”，函数（事件）{
keys[event.keyCode]=true；
})
文件。添加事件列表器（“键控”，功能（事件）{
删除键[event.keyCode]；
})
init（）；
var循环=函数（）{
更新（）；
draw（）；
requestAnimationFrame（循环，画布）；
};
window.requestAnimatio
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Snake Game</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Basic styling, centering the canvas -->
<style>
canvas {
position: absolute;
top: 20px;
bottom: 0px;
left: 250px;
right: 0px;
}
</style>
</head>
<body>
<canvas id="game" width="500" height="500"></canvas>
<script>
$(document).ready(function() {
var loadcount = 0;
var loadtotal = 0;
var preloaded = false;
var WIDTH = 500;
var HEIGHT = 500;
var keys = {};
var canvas = document.getElementById('game');
var ctx = canvas.getContext('2d');
var images = loadImages(["spaceship.png"]);
var player = {
x: null,
y: null,
width: 40,
height: 40,
speed: 5,
update: function() {
if (keys[39]) {
ctx.clearRect(this.x, this.y, this.width, this.height);
this.x += this.speed;
}
if (keys[37]) {
ctx.clearRect(this.x, this.y, this.width, this.height);
this.x -= this.speed;
}
if (keys[38]) {
ctx.clearRect(this.x, this.y, this.width, this.height);
this.y -= this.speed;
}
if (keys[40]) {
ctx.clearRect(this.x, this.y, this.width, this.height);
this.y += this.speed;
}
//Checks if it is out of Bounds
if (this.x > WIDTH - this.width) {
this.x = WIDTH - this.width;
}
if (this.x < 0) {
this.x = 0;
}
if (this.y > HEIGHT - 15) {
this.y = HEIGHT - 15;
}
if (this.y < 0) {
this.y = 0;
}
},
draw: function() {
ctx.save();
ctx.beginPath();
ctx.strokeStyle = 'blue'
ctx.moveTo(this.x, this.y);
ctx.lineWidth = 16;
ctx.lineTo(this.x + 15, this.y + 25);
ctx.lineTo(this.x - 15, this.y + 25);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
}
function main() {
document.addEventListener("keydown", function(event) {
keys[event.keyCode] = true;
})
document.addEventListener("keyup", function(event) {
delete keys[event.keyCode];
})
init();
var loop = function() {
update();
draw();
window.requestAnimationFrame(loop, canvas);
};
window.requestAnimationFrame(loop, canvas);
}
function init() {
player.x = (WIDTH / 2);
player.y = (HEIGHT / 2) + 150;
}
function draw() {
//Drawing the Square
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, HEIGHT);
ctx.lineTo(HEIGHT, WIDTH);
ctx.lineTo(WIDTH, 0)
ctx.lineTo(0, 0)
ctx.stroke();
player.draw();
}
function update() {
player.update();
}
function loadImages(imagefiles) {
// Initialize variables
loadcount = 0;
loadtotal = imagefiles.length;
preloaded = false;
// Load the images
var loadedimages = [];
for (var i = 0; i < imagefiles.length; i++) {
// Create the image object
var image = new Image();
// Add onload event handler
image.onload = function() {
loadcount++;
if (loadcount == loadtotal) {
// Done loading
preloaded = true;
}
};
// Set the source url of the image
image.src = imagefiles[i];
// Save to the image array
loadedimages[i] = image;
}
// Return an array of images
return loadedimages;
}
main();
})
</script>
</body>
</html>