не видит контекста (ctx ) в canvas
317
28 апреля 2018, 17:41
Игровое поле нарисовано в `canvas`, по нему отрисовываются фигурки, но при рендеринге пишет ошибку, что не видит контекст `canvas`.
file index.html
```<body>
<div class="modal">
<div class="modal-content">
<span class="btn">
<i class="fa fa-times" aria-hidden="true"></i>
</span>
<p class="alert-text">
</p>
<p class="rules">Rules of game</p>
</div>
</div>
<script src="js/resources.js"></script>
<!-- <script src="js/app.js"></script>-->
<script src="js/appUpdate.js"></script>
<script src="js/engine.js"></script>```
file appUpdate.js
'''const enemiesSprite = [
'images/enemy-bug.png',
'images/enemy-bug_invert.png'
];
console.dir(enemiesSprite);
const playerList = [
'images/char-boy.png',
'images/char-cat-girls.png',
'images/char-horn-girl.png',
'images/char-pink-girl.png',
'images/char-princess-girl.png'
];
let allEnemies = [],
dt,
speed,
player,
image,
dx,
dy,
firstPosition,
deltaPosition,
maxGameboard,
counterLife = 5,
counterCollision = 0,
maxPosition = {
x : 1506,
y : 1205
}; //actual position y 400
//ctx;
// Enemies our player must avoid
// Variables applied to each of our instances go here,
// we've provided one for you to get started
// The image/sprite for our enemies, this uses
// a helper we've provided to easily load images
class Enemy{
constructor(x, y, speed){
this.sprite = 'images/enemy-bug.png';
this.setEnemyY(y);
this.setEnemyX(x);
this.speed = speed;
}
setEnemyY(y){
// Enemy's Y coordinate stays the same during the game run
this.y = y;
this.y1 = this.y + 78;
this.y2 = this.y1 + 66;
}
setEnemyX(x){
this.x = x;
// (x1,y1) - left upper point of the bug figure
this.x1 = this.x + 2;
// (x2,y2) - right lower point of the bug figure
this.x2 = this.x1 + 96;
}
checkCoordinats(x,y,speed){
if (this.x >=1506){
this.x = -100;
this.speed = Math.round((Math.random()*250) + (Math.random()*250)); //actual version
//console.log("enemy came out for edge");
}
}
// Update the enemy's position, required method for game
// Parameter: dt, a time delta between ticks
update (dt){
// You should multiply any movement by the dt parameter
// which will ensure the game runs at the same speed for
// all computers.
// Enemy moves only to the right, y coordinate stays the same.
this.setEnemyX(this.x + dt * this.speed);
this.checkCoordinats();
}
// Draw the enemy on the screen, required method for game
render(){
//console.log(this.sprite);
ctx.drawImage(Resources.get(this.sprite), this.x, this.y);
}
}
class Player {
constructor(x, y){
// actual char-boy.png figure width = 68 px, height = 75 px
this.sprite = 'images/char-boy.png';
this.setPlayerCoordinates(x,y);
this.dx = 0;
this.dy = 0;
this.counterLife = counterLife;
this.counterCollision = counterCollision;
}
setPlayerCoordinates(x,y){
this.x = x;
this.y = y;
// (x1,y1) - left upper point of the boy figure
this.x1 = this.x + 19;
this.y1 = this.y + 80;// actual position +64
// (x2,y2) - left upper point of the boy figure
this.x2 = this.x1 + 68;
this.y2 = this.y1 + 61;// actual height +75
}
getNewPosition(position, maxGameboard){
//console.log(allowedKeys);
if (position == this.x){
maxGameboard = maxPosition.x;
} else {
maxGameboard = maxPosition.y;
}
if (position<= -80 || position >= maxGameboard){
this.x = 703;
this.y = 1130;
}
}
checkContactWithWater(x,y){
if (this.y > 839 && this.y < 1005){
console.log('contact with water');
console.log ('=======================');
} else if(this.y < 125){ `введите сюда код`
console.log('contact with water');
counterLife += 1;
//console.log(counterLife);
this.x = 400;
this.y = 715;
return counterLife;
}
}
checkCollisionSideByPlayer(){
//console.log(player.x1, player.x2);
for(let enemy of allEnemies){
// Here was the error !!!!!
//if(!(enemy.x2 < this.x1 || enemy.x2 > this.x2)){
if(!(enemy.x2 < this.x1 || enemy.x1 > this.x2)){
if(!(enemy.y2 < this.y1 || enemy.y1 > this.y2)){
//console.log(`enemy__x2: ${Math.round(enemy.x2)} >= ${Math.round(this.x1)} :player_x1`);
//console.log(``);
//console.log(`player_x2: ${Math.round(this.x2)} >= ${Math.round(enemy.x1)} :enemy__x1`);
//console.log(``);
console.log('================================================')
this.setPlayerCoordinates(703,1130);
}
}
}
}
update(){
this.setPlayerCoordinates(this.x + this.dx,this.y + this.dy);
this.checkContactWithWater();
this.getNewPosition(this.x, maxPosition.x);
this.getNewPosition(this.y, maxPosition.y);
this.checkCollisionSideByPlayer();
this.dx = 0;
this.dy = 0;
}
render(){
ctx.drawImage(Resources.get(this.sprite), this.x, this.y);
}
handleInput(allowedKeys){
// player's movement
// if allowedKeys = 37, move to left
//console.log(allowedKeys);
if(true && allowedKeys == "up"){
this.dy += -83;
} else if(true && allowedKeys == "down"){
this.dy += 83;
} else if(true && allowedKeys == "left"){
this.dx += -101;
} else if (true && allowedKeys == "right"){
this.dx += 101;
}
}
}
//add to gamefield Stone
class Stone {
constructor(x,y,sprite){
this.sprite = 'images/stone-block.png';
this.setStoneOX(x);
this.setStoneOY(y);
}
setStoneOX(x){
this.x = x;
this.x1 = this.x+4; //actual position of figure stone by OX
this.x2 = this.x+93;
}
setStoneOY(y){
this.y = y;
this.y1 = this.x+58; //actual position of fige stone by OY
this.y2 = this.y+103;
}
render(){
//console.log(this.sprite);
ctx.drawImage(Resources.get(this.sprite), this.x, this.y);
}
}
class Rock {
constructor(x, y){
this.sprite = 'images/Rock.png';
this.setRockY(y);
this.setRockX(x);
}
setRockY(y){
// Enemy's Y coordinate stays the same during the game run
this.y = y;
this.y1 = this.y + 67;
this.y2 = this.y1 + 155;
}
setRockX(x){
this.x = x;
// (x1,y1) - left upper point of the bug figure
this.x1 = this.x + 9;
// (x2,y2) - right lower point of the bug figure
this.x2 = this.x1 + 92;
}
render(){
console.log (this.ctx);
ctx.drawImage(Resources.get(this.sprite), this.x, this.y);
}
}
player = new Player(703, 1130);
let enemy = new Enemy(enemiesSprite[0],-100, 801, 350);
let enemy2 = new Enemy(-100, 561, 275);
let enemy3 = new Enemy(-100, 626, 400);
let enemy4 = new Enemy(-100, 712, 300);
let enemy5 = new Enemy(1505, 712, -350);
let stone = new Stone(106, 48);
let rock = new Rock(300, 500);
//rock.render(ctx);
allEnemies.push(enemy);
allEnemies.push(enemy2);
allEnemies.push(enemy3);
allEnemies.push(enemy4);
allEnemies.push(enemy5);```
file engine.js
```var Engine = (function(global) {
var doc = global.document,
win = global.window,
canvas = doc.createElement('canvas'),
ctx = canvas.getContext('2d'),
lastTime;
canvas.width = 1515; //actual position of canvas width 505;
canvas.height = 1515; //actual position of canvas width 606;
doc.body.appendChild(canvas);
function main() {
var now = Date.now(),
dt = (now - lastTime) / 1000.0;
update(dt);
render();
lastTime = now;
win.requestAnimationFrame(main);
}
function init() {
reset();
lastTime = Date.now();
main();
}
function update(dt) {
updateEntities(dt);
//checkCollisions();
}
//function checkCollisions(){
// console.log(allEnemies);
// }
function updateEntities(dt) {
allEnemies.forEach(function(enemy) {
enemy.update(dt);
});
player.update();
//console.log(player.x, enemy.x);
}
function render() {
/* This array holds the relative URL to the image used
* for that particular row of the game level.
*/
var rowImages = [
'images/grass-block.png', // Row 1 of 2 of secondgrass
'images/water-block.png', // Row 1 is 2 water
'images/water-block.png', // Row 2 is 2 water
'images/grass-block.png', // Row 1 of 2 of firstgrass
'images/grass-block.png', // Row 2 of 2 of firstgrass
'images/water-block.png', // Row 1 is 2 water
'images/water-block.png', // Row 2 is 2 water
'images/stone-block.png', // Row 1 of 4 of stone
'images/stone-block.png', // Row 2 of 4 of stone
'images/stone-block.png', // Row 3 of 4 of stone
'images/stone-block.png', // Row 4 of 4 of stone
'images/water-block.png', // Row 1 is 2 water
'images/water-block.png', // Row 2 is 2 water
'images/grass-block.png', // Row 1 of 2 of secondgrass
'images/grass-block.png' // Row 2 of 2 of secondgrass
],
numRows = 15,//actual position 6
numCols = 15, //actual position 5
row, col;
// Before drawing, clear existing canvas
ctx.clearRect(0,0,canvas.width,canvas.height)
for (row = 0; row < numRows; row++) {
for (col = 0; col < numCols; col++) {
ctx.drawImage(Resources.get(rowImages[row]), col * 101, row * 83);
}
}
renderEntities();
}
allEnemies.forEach(function(enemy) {
enemy.render();
});
//player.render();
player.render();
//rock.render();
}
function reset() {
// noop
}
Resources.load([
'images/stone-block.png',
'images/water-block.png',
'images/grass-block.png',
'images/enemy-bug.png',
'images/char-boy.png'
]);
Resources.onReady(init);
global.ctx = ctx;
})(this);```
-
12:23
-
20:41
-
06:31
-
21:28
-
22:18
-
08:00
-
13:46
-
10:14
-
18:32
Сборка персонального компьютера от Artline: умный выбор для современных пользователей
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 49888 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 31890 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 25850 visits
- Как через css изменить цвет png изображения? 11712 visits
- Blob video url download 11264 visits
- Php curl запрос через прокси с авторизацией 10637 visits
- Работа с captcha vk api 9456 visits
© "hostciti.net" 06.12.2025 | 01:03