* Я не могу понять, почему я получаю следующую ошибку на моей консоли: «Не могу прочитать свойство 'style' со значением null» в строке 216 (внизу, я добавил комментарий) из-за чего-то также на строках 190, 200, 213? Думаю, проблема в лазерной переменной ... Помогите, пожалуйста. Я был бы очень признателен, если бы кто-нибудь мог мне помочь как можно скорее. * '' '
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<div>
<h1 style="text-align:center; color:purple;" id="pixelator">
<big>
<i>
<b>
Pixelator
</b>
</i>
</big>
</h1>
<button type="button" id="button1" onclick="Instructions()">Instructions for game</button>
<button type="button" id="button2" onclick="YouTube()">YouTube</button>
<h3 id="Instructions1">
Use the keys WASD to controll player one(blue), Q to
shoot left and E to shoot right. Use the arrow keys to controll player two(),
1 on the numberpad to shoot left and two to shoot right.
</h3>
<button type="button" id="Close" onclick="close1()">Close</button>
</div>
<img src="C:/Users/Tania/Documents/Website/Screenshots/Nice.jpg" alt="Image not found" id="Pic">
</head>
<body style="background-color:green">
<style>
button {
background-color: #4169E1;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 30%;
height: 45px;
}
#hero {
background:#ff0000;
width:20px;
height:50px;
position:absolute;
}
#player {
background:#ff0000;
width:20px;
height:50px;
position:absolute;
}
#Pic {
width: 150px;
}
#laser {
width: 30;
height: 3;
background:#ff0000
position:absolute;
}
</style>
<div id="player"></div>
<div id="hero"></div>
<div id="laser"></div>
<script type="text/javascript">
function YouTube(){
window.open("https://www.youtube.com/channel/UCe9MhUIA6wwwchVBzypCBnA");
}
document.getElementById("Instructions1").style.display = "none";
document.getElementById("Close").style.display = "none";
function Instructions() {
document.getElementById("Instructions1").style.display = "block";
document.getElementById("Close").style.display = "block";
}
function close1() {
document.getElementById("Instructions1").style.display = "none";
document.getElementById("Close").style.display = "none";
}
var LEFT_KEY = 65;
var UP_KEY = 87;
var RIGHT_KEY = 68;
var DOWN_KEY = 83;
var LEFT_ARROW = 37;
var RIGHT_ARROW = 39;
var SPACE_KEY = 32;
var DOWN_ARROW = 40;
var UP_ARROW = 38;
var Q_KEY = 81;
var E_KEY = 69;
var HERO_MOVEMENT = 10;
var lastLoopRun = 0;
var controller = new Object();
var player = new Object();
player.element = 'player'
player.x = 650;
player.y =460;
var hero = new Object();
hero.element = 'hero';
hero.x = 250;
hero.y = 460;
var laser = new Object();
laser.x = 0;
laser.y = -120;
function ensureBounds(sprite, ignoreY) {
if (sprite.x < 20) {
sprite.x = 20;
}
if (!ignoreY && sprite.y < 20) {
sprite.y = 20;
}
if (sprite.x + sprite.w > 1910) {
sprite.x = 1910 - sprite.w;
}
if (!ignoreY && sprite.y + sprite.h > 940) {
sprite.y = 940 - sprite.h;
}
}
function createSprite(element, x, y, w, h) {
var result=new Object();
result.element=element;
result.x=x;
result.y=y;
result.w=w;
result.h=h;
return result;
}
function toggleKey(keyCode, isPressed) {
if (keyCode == DOWN_KEY) {
controller.down = isPressed;
}
if (keyCode == LEFT_KEY) {
controller.left = isPressed;
}
if (keyCode == RIGHT_KEY) {
controller.right = isPressed;
}
if (keyCode == UP_KEY) {
controller.up = isPressed;
}
if (keyCode == SPACE_KEY) {
controller.space = isPressed;
}
if (keyCode == LEFT_ARROW) {
controller.leftarrow = isPressed;
}
if (keyCode == RIGHT_ARROW) {
controller.rightarrow = isPressed;
}
if (keyCode == UP_ARROW) {
controller.rightarrow = isPressed
}
if (keyCode == DOWN_ARROW) {
controller.downarrow = isPressed
}
if (keyCode == Q_KEY) {
controller.qkey = isPressed
}
if (keyCode == E_KEY) {
controller.ekey = isPressed
}
}
function handleControls() {
if (controller.down) {
hero.y += HERO_MOVEMENT
}
if (controller.up) {
hero.y -= HERO_MOVEMENT
}
if (controller.left) {
hero.x -= HERO_MOVEMENT;
}
if (controller.right) {
hero.x += HERO_MOVEMENT;
}
if (controller.qkey && laser.x <= -120) {
laser.x=hero.x-20;
laser.y=hero.y+15;
}
if (controller.ekey && laser.x <= -120) {
laser.x=hero.x+20;
laser.y=hero.y+10;
}
ensureBounds(hero);
}
function showSprites() {
setPosition(hero);
setPosition(laser);
setPosition(player)
}
function updatePositions() {
laser.x-= 90
}
function loop() {
if (new Date().getTime() - lastLoopRun > 40) {
updatePositions();
handleControls();
showSprites();
lastLoopRun = new Date().getTime();
}
setTimeout('loop();', 2);
}
document.onkeydown = function(evt) {
toggleKey(evt.keyCode, true);
};
document.onkeyup = function(evt) {
toggleKey(evt.keyCode, false);
};
loop();
function setPosition(sprite) {
var e = document.getElementById(sprite.element)
//***LINE 216-*** e.style.left = sprite.x + 'px';
e.style.top = sprite.y + 'px';
}
createSprite('laser', 0, -120, 2, 50)
</script>
</body>
</html>
' ''