I'm trying to create a 2D platformer in JavaScript, I'm getting no errors, but it's not working properly. Pressing the left arrow or the up arrow key does nothing, pressing the right arrow key causes the X-Pos to start incrementing by 1 pixel per tick. I realize this code is long and my 'physics' logic is completely twisted and backwards, but I can't understand anyone's guides on how to add phsyics and velocity and acceleration and gravity and I'm just super confused. I started using JavaScript a week ago and I really have no idea what I'm doing, so any recommendations about any of my code, even things that aren't technically 'problems' would be most appreciated. Thanks guys, you're dope <3
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<head>
<title>For The Intended</title>
</head>
<body>
<canvas id="canvas" width="1200" height="800"></canvas>
<!-- <script src="platform.js"></script> -->
<script>
//
//notes
//
//Block collision should come when velocity tries to move, and the x-y position should be player.x + player.velocity to check exactly where the collision will be
//
//
//
//
//
//
//Canvas Settings
var cvs = document.getElementById("canvas");
var ctx = cvs.getContext('2d');
cvs.style = "position:absolute; left: 60%; width: 1200; margin-left: -800px";
//Variables
var platforms = [];
var imgCount = 0
var totalImgCount = 3
var lastUpdate = Date.now();
var keys = {};
//Controls
//Images
var platformImage = new Image();
var playerImage = new Image();
var bgImage = new Image();
platformImage.src = "images/platform.png";
playerImage.src = "images/forward1.png";
playerImage.src = "images/backward1.png";
bgImage.src = "images/bg.png";
platformImage.onload = function() {
imgCount += 1
}
playerImage.onload = function() {
imgCount += 1
}
bgImage.onload = function() {
imgCount += 1
}
//Objects
//Platforms
function Platform(x, y, length, height) {
this.x = x;
this.y = y;
this.length = length;
this.height = height;
platforms.push(this)
}
platform = new Platform(30,30,30,30)
platform = new Platform(40,40,40,40)
//Player
function Player(x, y, gravity, velocityX, velocityY, acceleration, isJumping, direction){
this.x = x
this.y = y
this.gravity = gravity
this.velocityX = velocityX
this.velocityY = velocityY
this.acceleration = acceleration
this.isJumping = isJumping
this.direction = direction
}
player = new Player(200, 600, 0.7, 1, 1, false, "forward")
function jump() {
if (player.isJumping == false) {
player.velocityY = -15;
player.isJumping = true;
}
}
function jumpingHandler() {
if (player.isJumping) {
player.velocityY += player.gravity;
player.y += player.velocityY;
draw();
if (player.y > 600) {
player.y = 600;
player.velocityY = 0;
player.isJumping = false;
}
}
}
*function move(e) {
if(keys[e.keyCode]) {
if(keys[38]) {
jump();
}
if(keys[37]) {
if (player.x > 150){
if (player.acceleration > -5){
player.acceleration = Math.floor(player.acceleration);
player.acceleratoion -= 1
player.acceleration = Math.floor(player.acceleration);
}
player.direction = "backward"
playerImage.src = "images/backward1.png";
}
}
if(keys[39]) {
if (player.x < 1050){
console.log("hey")
if (player.acceleration < 5){
console.log("hey2")
player.acceleration = Math.floor(player.acceleration);
player.acceleration += 1
player.acceleration = Math.floor(player.acceleration);
}
player.direction = "forward"
playerImage.src = "images/forward1.png";
}
}
}
}*
//Game Requirements
function draw() {
if (imgCount == 3) {
for (var i = 0; i < platforms.length; i++) {
ctx.drawImage(platformImage, platforms[i].x, platforms[i].y)
//Do something
}
ctx.drawImage(playerImage, player.x, player.y)
}
}
setInterval(update, 33);
function updateKeys() {
window.onkeyup = function(e) { keys[e.keyCode] = false; move(e)}
window.onkeydown = function(e) { keys[e.keyCode] = true; move(e)}
}
function update() {
if (player.acceleration > 1) {player.acceleration -= 0.2}
if (player.acceleration < 1) {player.acceleration += 0.2}
player.acceleration = Math.floor(player.acceleration);
player.velocityX = player.acceleration
player.x += (player.velocityX)
console.log("Velocity" + player.velocityX)
console.log("Acceleration" + player.acceleration)
console.log("X-Pos" + player.x)
jumpingHandler()
updateKeys()
draw()
}
</script>
</body>
</html>
Related
I am very new to coding. I am trying to make a game using java in notepad++. I cant seem to get it so that when the red square (player) hits the purple (TopEdge) the red square will not stop completely but also wont travel through the purple. Like a wall. Right now when the red square hits the purple, you cant move it anymore. I have tried almost everything i could find on the internet. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="utf-8">
<style>
canvas {
border:4px solid #000000;
background-color: #1FB026;
}
</style>
</head>
<body onload="startGame()">
<script>
var player;
var TopEdge;
function startGame() {
player = new component(30, 30, "red", 10, 120);
TopEdge = new component(10000, 300, "purple", 0, -200);
myGameArea.start();
}
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 1150;
this.canvas.height = 500;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas,
document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 10);
window.addEventListener('keydown', function (e) {
myGameArea.keys = (myGameArea.keys || []);
myGameArea.keys[e.keyCode] = (e.type == "keydown");
})
window.addEventListener('keyup', function (e) {
myGameArea.keys[e.keyCode] = (e.type == "keydown");
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
stop : function(){
clearInterval(this.interval);
}
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.newPos = function() {
this.X += this.speedX;
this.Y += this.speedY;
let playerX = this.X + this.speedX;
let playerY = this.Y + this.speedY;
if (playerX >= 0 && this.width + playerX <= this.gamearea.canvas.width)
{
this.X = playerX;
}
if (playerY >= 0 && this.height + playerY <= this.gamearea.canvas.height)
{
this.Y = playerY;
}
}
this.crashWith = function(otherobj) {
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var otherleft = otherobj.x;
var otherright = otherobj.x + (otherobj.width);
var othertop = otherobj.y;
var otherbottom = otherobj.y + (otherobj.height);
var crash = true;
if ((mybottom < othertop) ||
(mytop > otherbottom) ||
(myright < otherleft) ||
(myleft > otherright)) {
crash = false;
}
return crash;
}
}
function stopY() {
player.speedY = 0;
}
function updateGameArea() {
if (player.crashWith(TopEdge)) {
} else {
myGameArea.clear();
TopEdge.update();
player.x += player.speedX;
player.y += player.speedY;
player.update();
}
TopEdge.update();
player.speedX = 0;
player.speedY = 0;
if (myGameArea.keys && myGameArea.keys[65]) {player.speedX = -2.5; }
if (myGameArea.keys && myGameArea.keys[68]) {player.speedX = 2.5; }
if (myGameArea.keys && myGameArea.keys[87]) {player.speedY = -2.5; }
if (myGameArea.keys && myGameArea.keys[83]) {player.speedY = 2.5; }
player.newPos();
player.update();
}
</script>
</body>
</html>
The problem starts with your updateGameArea() function.
If your the player crashes with the TopEdge then you do nothing. Your creating a problem with your else-part over there. It will never reach the else like this, so nothing while change, so next time it still won't move and again it will not reach the else.....
How about removing the else part. Just check for everything all the time, but don't allow it to move up when it reached the TopEdge.
This should help.
function updateGameArea() {
// I'd prefer these calls at the end of the function block
// but right now your program would start kinda buggy then
myGameArea.clear();
player.newPos();
player.update();
TopEdge.update();
// In default state (nothing pressed) player shouldn't move up or down
player.speedX = 0;
player.speedY = 0;
// If the player does press a key set correct speed/direction
if (myGameArea.keys[65]) {player.speedX = -2.5; }
if (myGameArea.keys[68]) {player.speedX = 2.5; }
if (myGameArea.keys[87]) {player.speedY = -2.5; }
if (myGameArea.keys[83]) {player.speedY = 2.5; }
// Check if player reached the top
// If it did, then it shouldn't be able to climb any higher.
// So even if the player presses the up-button,
// the vertical speed should still not be aloud to change.
if (player.crashWith(TopEdge) && myGameArea.keys[87]) {
player.speedY = 0;
}
// Move the position of the player
player.x += player.speedX; //
player.y += player.speedY;
}
This question already has an answer here:
CanvasContext2D drawImage() issue [onload and CORS]
(1 answer)
Closed 4 years ago.
I am trying to make a infinite scrolling game in javascript.
The following code works as expected (it doesn't work here because the images cannot be uploaded):
class Vec {
constructor(x = 0, y = 0) {
this.x = x;
this.y = y;
}
}
class Rect {
constructor(src) {
this.pos = new Vec;
this.vel = new Vec;
this.image = new Image();
this.image.src = src;
}
get left() {
return this.pos.x;
}
get right() {
return this.pos.x + this.image.width;
}
get top() {
return this.pos.y;
}
get bottom() {
return this.pos.y + this.image.height;
}
}
class Player extends Rect {
constructor() {
super("images/frog-still.png");
this.pos.x = 100;
this.pos.y = HEIGHT - GROUND_Y - this.image.height;
}
}
class Enemy extends Rect {
constructor() {
super("images/spike.png");
this.image.width = this.image.width / 4;
this.image.height = this.image.height / 4;
this.pos.x = WIDTH;
this.pos.y = HEIGHT - GROUND_Y - this.image.height;
}
}
// setup
const ctx = document.getElementById("canvas").getContext("2d");
let isOver = false;
const WIDTH = 600;
const HEIGHT = 400;
const GROUND_Y = 50;
const player = new Player;
let enemies = [];
const MAX_ENEMY = 3;
let isJumping = false;
const JUMP_STRENGTH = -450;
const GRAVITY = 25;
document.addEventListener("keydown", (e) => {
if (e.keyCode === 38 && isJumping === false) {
isJumping = true;
player.vel.y = JUMP_STRENGTH;
}
}, false);
let lastUpdate = 0;
let random = Math.floor((Math.random() * 2501) + 1000);
function update(dt, now) {
// update player
player.vel.y += GRAVITY;
player.pos.y += player.vel.y * dt;
if (player.bottom >= HEIGHT - GROUND_Y) {
isJumping = false;
player.pos.y = HEIGHT - GROUND_Y - player.image.height;
player.vel.y = 0;
}
// create enemy
if (now - lastUpdate > random) {
lastUpdate = now;
random = Math.floor((Math.random() * 2501) + 1000);
enemies.push(new Enemy);
}
for (let i = 0; i < enemies.length; i++) {
// update enemy
enemies[i].vel.x = -300 - (now / 500);
enemies[i].pos.x += enemies[i].vel.x * dt;
if (player.right > enemies[i].left && player.left < enemies[i].right && player.bottom > enemies[i].top)
isOver = true;
if (enemies[i].right < 0)
enemies.splice(i, 1);
}
}
function draw() {
// draw background
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, WIDTH, HEIGHT);
// draw ground
ctx.fillStyle = "#0f0";
ctx.fillRect(0, HEIGHT - GROUND_Y, WIDTH, GROUND_Y);
// draw player
ctx.drawImage(player.image, player.pos.x, player.pos.y, player.image.width, player.image.height);
// draw enemy
ctx.fillStyle = "#f00";
for (let i = 0; i < enemies.length; i++) {
ctx.drawImage(enemies[i].image, enemies[i].pos.x, enemies[i].pos.y, enemies[i].image.width, enemies[i].image.height);
}
}
// game loop
const TIMESTEP = 1 / 60;
let accumulator = 0;
let lastRender = 0;
function loop(timestamp) {
accumulator += (timestamp - lastRender) / 1000;
lastRender = timestamp;
while (accumulator >= TIMESTEP) {
update(TIMESTEP, timestamp);
accumulator -= TIMESTEP;
}
draw();
if (!isOver)
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
<!DOCTYPE html>
<html>
<head>
<title>Jump_Over_It</title>
<link href="css/default.css" rel="stylesheet" />
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script src="js/main.js"></script>
</body>
</html>
However, when add
this.image.width = this.image.width / 2;
this.image.height = this.image.height / 2;
to the Player class (like I did with the Enemy class), the player disappears. If I do console.log(player.image), it says that the image width and the image height is equal to 0. Why is this happening?
How can I fix this problem?
I don't know why, but while the image is not rendered the width and height are 0. So, I created the method beforeRender() that is implemented by Player and Enemy. This method is invoked before the ctx.drawImage and update the graphics settings.
I know it is not the answer you are looking for, but it is my best.
class Vec {
constructor(x = 0, y = 0) {
this.x = x;
this.y = y;
}
}
class Rect {
constructor(src) {
this.pos = new Vec;
this.vel = new Vec;
this.image = new Image;
this.image.src = src;
this.rendered = false;
}
get left() {
return this.pos.x;
}
get right() {
return this.pos.x + this.image.width;
}
get top() {
return this.pos.y;
}
get bottom() {
return this.pos.y + this.image.height;
}
get render() {
if (!this.rendered) {
if (this.beforeRender()) {
this.rendered = true;
}
}
return this.image;
}
beforeRender() {}
}
class Player extends Rect {
constructor() {
super("https://cdn4.iconfinder.com/data/icons/spring-flat-colorful/2048/5683_-_Frog-256.png");
this.pos.x = 100;
this.pos.y = HEIGHT - GROUND_Y - this.image.height;
}
beforeRender() {
if (this.image.width && this.image.height) {
this.image.width /= 2;
this.image.height /= 2;
return true;
}
return false;
}
}
class Enemy extends Rect {
constructor() {
super("https://vignette.wikia.nocookie.net/scribblenauts/images/8/8d/Steel_Spike.png/revision/latest?cb=20130105173440");
this.image.width /= 4;
this.image.height /= 4;
this.pos.x = WIDTH;
this.pos.y = HEIGHT - GROUND_Y - this.image.height;
}
beforeRender() {
if (this.image.width && this.image.height) {
this.image.width /= 4;
this.image.height /= 4;
return true;
}
return false;
}
}
// setup
const ctx = document.getElementById("canvas").getContext("2d");
let isOver = false;
const WIDTH = 600;
const HEIGHT = 400;
const GROUND_Y = 50;
const player = new Player;
let enemies = [];
const MAX_ENEMY = 3;
let isJumping = false;
const JUMP_STRENGTH = -450;
const GRAVITY = 25;
document.addEventListener("keydown", (e) => {
if (e.keyCode === 38 && isJumping === false) {
isJumping = true;
player.vel.y = JUMP_STRENGTH;
}
}, false);
let lastUpdate = 0;
let random = Math.floor((Math.random() * 2501) + 1000);
function update(dt, now) {
// update player
player.vel.y += GRAVITY;
player.pos.y += player.vel.y * dt;
if (player.bottom >= HEIGHT - GROUND_Y) {
isJumping = false;
player.pos.y = HEIGHT - GROUND_Y - player.image.height;
player.vel.y = 0;
}
// create enemy
if (now - lastUpdate > random) {
lastUpdate = now;
random = Math.floor((Math.random() * 2501) + 1000);
enemies.push(new Enemy);
}
for (let i = 0; i < enemies.length; i++) {
// update enemy
enemies[i].vel.x = -300 - (now / 500);
enemies[i].pos.x += enemies[i].vel.x * dt;
if (player.right > enemies[i].left && player.left < enemies[i].right && player.bottom > enemies[i].top)
isOver = true;
if (enemies[i].right < 0)
enemies.splice(i, 1);
}
}
function draw() {
// draw background
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, WIDTH, HEIGHT);
// draw ground
ctx.fillStyle = "#0f0";
ctx.fillRect(0, HEIGHT - GROUND_Y, WIDTH, GROUND_Y);
// draw player
ctx.drawImage(player.render, player.pos.x, player.pos.y, player.image.width, player.image.height);
// draw enemy
ctx.fillStyle = "#f00";
for (let i = 0; i < enemies.length; i++) {
ctx.drawImage(enemies[i].image, enemies[i].pos.x, enemies[i].pos.y, enemies[i].image.width, enemies[i].image.height);
}
}
// game loop
const TIMESTEP = 1 / 60;
let accumulator = 0;
let lastRender = 0;
requestAnimationFrame(loop);
function loop(timestamp) {
accumulator += (timestamp - lastRender) / 1000;
lastRender = timestamp;
while (accumulator >= TIMESTEP) {
update(TIMESTEP, timestamp);
accumulator -= TIMESTEP;
}
draw();
if (!isOver)
requestAnimationFrame(loop);
}
<!DOCTYPE html>
<html>
<head>
<title>Jump_Over_It</title>
<link href="css/default.css" rel="stylesheet" />
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script src="js/main.js"></script>
</body>
</html>
I'm trying to get this particle explosion working. It's working but it looks like some frames does not get rendered. If I click many times to call several explosions it starts to uhm.. "lag/stutter". Is there something I have forgotten to do? It may look like the browser hangs when I click many times. Is it too much to have 2 for loops inside each other?
Attached my code so you can see.
Just try to click many times, and you will see the problem visually.
// Request animation frame
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
// Canvas
var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
// Set full-screen
c.width = window.innerWidth;
c.height = window.innerHeight;
// Options
var background = '#333'; // Background color
var particlesPerExplosion = 20;
var particlesMinSpeed = 3;
var particlesMaxSpeed = 6;
var particlesMinSize = 1;
var particlesMaxSize = 3;
var explosions = [];
var fps = 60;
var now, delta;
var then = Date.now();
var interval = 1000 / fps;
// Optimization for mobile devices
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
fps = 29;
}
// Draw
function draw() {
// Loop
requestAnimationFrame(draw);
// Set NOW and DELTA
now = Date.now();
delta = now - then;
// New frame
if (delta > interval) {
// Update THEN
then = now - (delta % interval);
// Our animation
drawBackground();
drawExplosion();
}
}
// Draw explosion(s)
function drawExplosion() {
if (explosions.length == 0) {
return;
}
for (var i = 0; i < explosions.length; i++) {
var explosion = explosions[i];
var particles = explosion.particles;
if (particles.length == 0) {
explosions.splice(i, 1);
return;
}
for (var ii = 0; ii < particles.length; ii++) {
var particle = particles[ii];
// Check particle size
// If 0, remove
if (particle.size < 0) {
particles.splice(ii, 1);
return;
}
ctx.beginPath();
ctx.arc(particle.x, particle.y, particle.size, Math.PI * 2, 0, false);
ctx.closePath();
ctx.fillStyle = 'rgb(' + particle.r + ',' + particle.g + ',' + particle.b + ')';
ctx.fill();
// Update
particle.x += particle.xv;
particle.y += particle.yv;
particle.size -= .1;
}
}
}
// Draw the background
function drawBackground() {
ctx.fillStyle = background;
ctx.fillRect(0, 0, c.width, c.height);
}
// Clicked
function clicked(e) {
var xPos, yPos;
if (e.offsetX) {
xPos = e.offsetX;
yPos = e.offsetY;
} else if (e.layerX) {
xPos = e.layerX;
yPos = e.layerY;
}
explosions.push(new explosion(xPos, yPos));
}
// Explosion
function explosion(x, y) {
this.particles = [];
for (var i = 0; i < particlesPerExplosion; i++) {
this.particles.push(new particle(x, y));
}
}
// Particle
function particle(x, y) {
this.x = x;
this.y = y;
this.xv = randInt(particlesMinSpeed, particlesMaxSpeed, false);
this.yv = randInt(particlesMinSpeed, particlesMaxSpeed, false);
this.size = randInt(particlesMinSize, particlesMaxSize, true);
this.r = randInt(113, 222);
this.g = '00';
this.b = randInt(105, 255);
}
// Returns an random integer, positive or negative
// between the given value
function randInt(min, max, positive) {
if (positive == false) {
var num = Math.floor(Math.random() * max) - min;
num *= Math.floor(Math.random() * 2) == 1 ? 1 : -1;
} else {
var num = Math.floor(Math.random() * max) + min;
}
return num;
}
// On-click
$('canvas').on('click', function(e) {
clicked(e);
});
draw();
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</html>
You are returning from iterating over the particles if one is too small. This causes the other particles of that explosion to render only in the next frame.
I have a working version:
// Request animation frame
const requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
// Canvas
const c = document.getElementById('canvas');
const ctx = c.getContext('2d');
// Set full-screen
c.width = window.innerWidth;
c.height = window.innerHeight;
// Options
const background = '#333'; // Background color
const particlesPerExplosion = 20;
const particlesMinSpeed = 3;
const particlesMaxSpeed = 6;
const particlesMinSize = 1;
const particlesMaxSize = 3;
const explosions = [];
let fps = 60;
const interval = 1000 / fps;
let now, delta;
let then = Date.now();
// Optimization for mobile devices
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
fps = 29;
}
// Draw
function draw() {
// Loop
requestAnimationFrame(draw);
// Set NOW and DELTA
now = Date.now();
delta = now - then;
// New frame
if (delta > interval) {
// Update THEN
then = now - (delta % interval);
// Our animation
drawBackground();
drawExplosion();
}
}
// Draw explosion(s)
function drawExplosion() {
if (explosions.length === 0) {
return;
}
for (let i = 0; i < explosions.length; i++) {
const explosion = explosions[i];
const particles = explosion.particles;
if (particles.length === 0) {
explosions.splice(i, 1);
return;
}
const particlesAfterRemoval = particles.slice();
for (let ii = 0; ii < particles.length; ii++) {
const particle = particles[ii];
// Check particle size
// If 0, remove
if (particle.size <= 0) {
particlesAfterRemoval.splice(ii, 1);
continue;
}
ctx.beginPath();
ctx.arc(particle.x, particle.y, particle.size, Math.PI * 2, 0, false);
ctx.closePath();
ctx.fillStyle = 'rgb(' + particle.r + ',' + particle.g + ',' + particle.b + ')';
ctx.fill();
// Update
particle.x += particle.xv;
particle.y += particle.yv;
particle.size -= .1;
}
explosion.particles = particlesAfterRemoval;
}
}
// Draw the background
function drawBackground() {
ctx.fillStyle = background;
ctx.fillRect(0, 0, c.width, c.height);
}
// Clicked
function clicked(e) {
let xPos, yPos;
if (e.offsetX) {
xPos = e.offsetX;
yPos = e.offsetY;
} else if (e.layerX) {
xPos = e.layerX;
yPos = e.layerY;
}
explosions.push(
new explosion(xPos, yPos)
);
}
// Explosion
function explosion(x, y) {
this.particles = [];
for (let i = 0; i < particlesPerExplosion; i++) {
this.particles.push(
new particle(x, y)
);
}
}
// Particle
function particle(x, y) {
this.x = x;
this.y = y;
this.xv = randInt(particlesMinSpeed, particlesMaxSpeed, false);
this.yv = randInt(particlesMinSpeed, particlesMaxSpeed, false);
this.size = randInt(particlesMinSize, particlesMaxSize, true);
this.r = randInt(113, 222);
this.g = '00';
this.b = randInt(105, 255);
}
// Returns an random integer, positive or negative
// between the given value
function randInt(min, max, positive) {
let num;
if (positive === false) {
num = Math.floor(Math.random() * max) - min;
num *= Math.floor(Math.random() * 2) === 1 ? 1 : -1;
} else {
num = Math.floor(Math.random() * max) + min;
}
return num;
}
// On-click
$('canvas').on('click', function (e) {
clicked(e);
});
draw();
<!DOCTYPE html>
<html>
<head>
<style>* {margin:0;padding:0;overflow:hidden;}</style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</html>
Loops, break and continue.
The problem was caused when you checked for empty particle arrays and when you found a particle to remove.
The bugs
The following two statements and blocks caused the problem
if (particles.length == 0) {
explosions.splice(i, 1);
return;
}
and
if (particles.size < 0) {
explosions.splice(ii, 1);
return;
}
The returns stopped the rendering of particles, so you would sometimes return before drawing a single particle was rendered just because the first explosion was empty or first particle was too small.
Continue and break
You can use the continue token in javascript to skip the rest of a for, while, do loop
for(i = 0; i < 100; i++){
if(test(i)){
// need to skip this iteration
continue;
}
// more code
// more code
// continue skips all the code upto the closing }
} << continues to here and if i < 100 the loop continues on.
Or you can completely break out of the loop with break
for(i = 0; i < 100; i++){
if(test(i)){
// need to exit the for loop
break;
}
// more code
// more code
// break skips all the code to the first line after the closing }
}
<< breaks to here and if i remains the value it was when break was encountered
The fix
if (particles.length == 0) {
explosions.splice(i, 1);
continue;
}
and
if (particles.size < 0) {
explosions.splice(ii, 1);
continue;
}
Your example with the fix
Your code with the fix. Befor I found it I started changing stuff.
Minor stuff.
requestAnimationFrame passes a time in milliseconds so to an accuracy of micro seconds.
You were setting then incorrectly and would have been losing frames. I changed the timing to use the argument time and then is just set to the time when a frame is drawn.
There are some other issues, nothing major and more of a coding style thing. You should capitalise objects created with new
function Particle(...
not
function particle(...
and your random is a overly complex
function randInt(min, max = min - (min = 0)) {
return Math.floor(Math.random() * (max - min) + min);
}
or
function randInt(min,max){
max = max === undefined ? min - (min = 0) : max;
return Math.floor(Math.random() * (max - min) + min);
}
randInt(100); // int 0 - 100
randInt(10,20); // int 10-20
randInt(-100); // int -100 to 0
randInt(-10,20); // int -10 to 20
this.xv = randInt(-particlesMinSpeed, particlesMaxSpeed);
this.yv = randInt(-particlesMinSpeed, particlesMaxSpeed);
this.size = randInt(particlesMinSize, particlesMaxSize);
And if you are using the same name in variables a good sign to create an object
var particlesPerExplosion = 20;
var particlesMinSpeed = 3;
var particlesMaxSpeed = 6;
var particlesMinSize = 1;
var particlesMaxSize = 3;
Could be
const settings = {
particles : {
speed : {min : 3, max : 6 },
size : {min : 1 : max : 3 },
explosionCount : 20,
},
background : "#000",
}
Anyways your code.
var c = canvas;
var ctx = c.getContext('2d');
// Set full-screen
c.width = innerWidth;
c.height = innerHeight;
// Options
var background = '#333'; // Background color
var particlesPerExplosion = 20;
var particlesMinSpeed = 3;
var particlesMaxSpeed = 6;
var particlesMinSize = 1;
var particlesMaxSize = 3;
var explosions = [];
var fps = 60;
var now, delta;
var then = 0; // Zero start time
var interval = 1000 / fps;
// Optimization for mobile devices
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
fps = 29;
}
// Draw
// as time is passed you need to start with requestAnimationFrame
requestAnimationFrame(draw);
function draw(time) { //requestAnimationFrame frame passes the time
requestAnimationFrame(draw);
delta = time - then;
if (delta > interval) {
then = time
drawBackground();
drawExplosion();
}
}
// Draw explosion(s)
function drawExplosion() {
if (explosions.length == 0) {
return;
}
for (var i = 0; i < explosions.length; i++) {
var explosion = explosions[i];
var particles = explosion.particles;
if (particles.length == 0) {
explosions.splice(i, 1);
//return;
continue;
}
for (var ii = 0; ii < particles.length; ii++) {
var particle = particles[ii];
// Check particle size
// If 0, remove
if (particle.size < 0) {
particles.splice(ii, 1);
// return;
continue;
}
ctx.beginPath();
ctx.arc(particle.x, particle.y, particle.size, Math.PI * 2, 0, false);
ctx.closePath();
ctx.fillStyle = 'rgb(' + particle.r + ',' + particle.g + ',' + particle.b + ')';
ctx.fill();
// Update
particle.x += particle.xv;
particle.y += particle.yv;
particle.size -= .1;
}
}
}
// Draw the background
function drawBackground() {
ctx.fillStyle = background;
ctx.fillRect(0, 0, c.width, c.height);
}
// Clicked
function clicked(e) {
var xPos, yPos;
if (e.offsetX) {
xPos = e.offsetX;
yPos = e.offsetY;
} else if (e.layerX) {
xPos = e.layerX;
yPos = e.layerY;
}
explosions.push(new explosion(xPos, yPos));
}
// Explosion
function explosion(x, y) {
this.particles = [];
for (var i = 0; i < particlesPerExplosion; i++) {
this.particles.push(new particle(x, y));
}
}
// Particle
function particle(x, y) {
this.x = x;
this.y = y;
this.xv = randInt(particlesMinSpeed, particlesMaxSpeed, false);
this.yv = randInt(particlesMinSpeed, particlesMaxSpeed, false);
this.size = randInt(particlesMinSize, particlesMaxSize, true);
this.r = randInt(113, 222);
this.g = '00';
this.b = randInt(105, 255);
}
// Returns an random integer, positive or negative
// between the given value
function randInt(min, max, positive) {
if (positive == false) {
var num = Math.floor(Math.random() * max) - min;
num *= Math.floor(Math.random() * 2) == 1 ? 1 : -1;
} else {
var num = Math.floor(Math.random() * max) + min;
}
return num;
}
// On-click
$('canvas').on('click', function(e) {
clicked(e);
});
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</html>
The Problem
I am creating a game that involves dodging projectiles. The player is in control of an image of a ship and I dont want the ship to move exactly together as this looks very unrealistic.
The Question
Is there a way to control how fast the image moves, how can i slow the movemnt of the image down?
The Code
var game = create_game();
game.init();
//music
var snd = new Audio("Menu.mp3");
snd.loop = true;
snd.play();
document.getElementById('mute').addEventListener('click', function (evt) {
if ( snd.muted ) {
snd.muted = false
evt.target.innerHTML = 'mute'
}
else {
snd.muted = true
evt.target.innerHTML = 'unmute'
}
})
function create_game() {
debugger;
var level = 1;
var projectiles_per_level = 1;
var min_speed_per_level = 1;
var max_speed_per_level = 2;
var last_projectile_time = 0;
var next_projectile_time = 0;
var width = 600;
var height = 500;
var delay = 1000;
var item_width = 30;
var item_height = 30;
var total_projectiles = 0;
var projectile_img = new Image();
var projectile_w = 30;
var projectile_h = 30;
var player_img = new Image();
var c, ctx;
var projectiles = [];
var player = {
x: 200,
y: 400,
score: 0
};
function init() {
projectile_img.src = "projectile.png";
player_img.src = "player.png";
level = 1;
total_projectiles = 0;
projectiles = [];
c = document.getElementById("c");
ctx = c.getContext("2d");
ctx.fillStyle = "#ff6600";
ctx.fillRect(0, 0, 500, 600);
c.addEventListener("mousemove", function (e) {
//moving over the canvas.
var bounding_box = c.getBoundingClientRect();
player.x = (e.clientX - bounding_box.left) * (c.width / bounding_box.width) - player_img.width / 2;
}, false);
setupProjectiles();
requestAnimationFrame(tick);
}
function setupProjectiles() {
var max_projectiles = level * projectiles_per_level;
while (projectiles.length < max_projectiles) {
initProjectile(projectiles.length);
}
}
function initProjectile(index) {
var max_speed = max_speed_per_level * level;
var min_speed = min_speed_per_level * level;
projectiles[index] = {
x: Math.round(Math.random() * (width - 2 * projectile_w)) + projectile_w,
y: -projectile_h,
v: Math.round(Math.random() * (max_speed - min_speed)) + min_speed,
delay: Date.now() + Math.random() * delay
}
total_projectiles++;
}
function collision(projectile) {
if (projectile.y + projectile_img.height < player.y + 74) {
return false;
}
if (projectile.y > player.y + 74) {
return false;
}
if (projectile.x + projectile_img.width < player.x + 177) {
return false;
}
if (projectile.x > player.x + 177) {
return false;
}
return true;
}
function maybeIncreaseDifficulty() {
level = Math.max(1, Math.ceil(player.score / 10));
setupProjectiles();
}
function tick() {
var i;
var projectile;
var dateNow = Date.now();
c.width = c.width;
for (i = 0; i < projectiles.length; i++) {
projectile = projectiles[i];
if (dateNow > projectile.delay) {
projectile.y += projectile.v;
if (collision(projectile)) {
initProjectile(i);
player.score++;
} else if (projectile.y > height) {
initProjectile(i);
} else {
ctx.drawImage(projectile_img, projectile.x, projectile.y);
}
}
}
ctx.font = "bold 24px sans-serif";
ctx.fillStyle = "#ff6600";
ctx.fillText(player.score, c.width - 50, 50);
ctx.fillText("Level: " + level, 20, 50);
ctx.drawImage(player_img, player.x, player.y);
maybeIncreaseDifficulty();
requestAnimationFrame(tick);
}
return {
init: init
};
}
https://jsfiddle.net/a6nmy804/4/ (Broken)
Throttle the player's movement using a "timeout" countdown
Create a global var playerFreezeCountdown=0.
In mousemove change player.x only if playerFreezeCountdown<=0.
If playerFreezeCountdown>0 you don't change player.x.
If playerFreezeCountdown<=0 you both change player.x and also set playerFreezeCountdown to a desired "tick timeout" value: playerFreezeCountdown=5. This timeout will cause prevent the player from moving their ship until 5 ticks have passed.
In tick, always decrement playerFreezeCountdown--. This will indirectly allow a change to player.x after when playerFreezeCountdown is decremented to zero or below zero.
So I have this sprite animation which goes fine when it's not in movement (I need it to go on 20 fps max because if not the animation would be too fast), but when I try to move it across the screen, the movement looks really choppy. Any ideas on how to make the movement smoothly? Increase the framerate works, but I'd like to see if there is another option aside of that.
var canvasA = document.createElement("canvas");
var canvasB = document.createElement("canvas");
var contextA = canvasA.getContext("2d");
var contextB = canvasB.getContext("2d");
canvasA.style.position = "absolute";
canvasB.style.position = "absolute";
var xpos = 0;
var ypos = 0;
var index = 0;
var frameSizeX = 140;
var frameSizeY = 395;
var numFrames = 20;
var drawing_character = false;
var xPosition = 0;
var now, then, elapsed, startTime, fps, fpsInterval;
var fpscounter = setInterval(updatefps, 1000);
var forw = true;
var cfps = 0;
// Pictures
var background = new Image();
background.src = "http://i.imgur.com/3FDB45h.png";
var character = new Image();
character.src = "http://i.imgur.com/tziJajG.png";
function redraw() {
contextB.clearRect(0, 0, canvasB.width, canvasB.height);
contextB.drawImage(background, 0, 0);
}
function drawchar() { // Input= fps max
requestAnimationFrame(drawchar);
now = Date.now();
elapsed = now - then;
if (elapsed > fpsInterval) {
then = now - (elapsed % fpsInterval);
contextA.clearRect(0, 0, 800, 600);
contextA.drawImage(character,
xpos,
ypos,
frameSizeX,
frameSizeY,
xPosition,
0,
frameSizeX,
frameSizeY);
xpos += frameSizeX;
index += 1;
if (index >= numFrames) {
xpos = 0;
ypos = 0;
index = 0;
} else if (xpos + frameSizeX > character.width) {
xpos = 0;
ypos += frameSizeY;
}
cfps++;
}
}
function updatefps() {
document.getElementById("fps").innerHTML = "FPS: " + cfps;
cfps = 0;
}
function aqui() {
prepareCanvas();
setInterval(redraw, 1000/60);
animarchar(20);
setInterval(move, 1);
}
function move() {
if (forw === true) {
xPosition += 1;
if (xPosition === 300){
forw = false;}
} else {
xPosition -= 1;
if (xPosition === 0){
forw = true;}
}
}
function prepareCanvas() {
canvasB.width = 800;
canvasB.height = 600;
canvasA.width = canvasB.width;
canvasA.height = canvasB.height;
//document.body.appendChild(canvasB);
document.body.appendChild(canvasA);
}
function animarchar(fps) {
fpsInterval = 1000 / fps;
then = Date.now();
startTime = then;
drawchar();
}
window.onload = function () {
aqui();
};
Here is a jsFiddle: https://jsfiddle.net/qb171ghf/