I want to draw out all of the objects that I have in my zombielist. but I can't get it to work.
var FatZombieWikki = new Image();
FatZombieWikki.src = "FatZombieWikki.png";
var Zombie = function(x, y) {
this.x = x;
this.y = y;
this.Draw = function(ctx) {
ctx.drawImage(FatZombieWikki,200,ZombieY,50,50);
}
this.Update = function(){
if(ZombieY < 900) {
ZombieY += 0.5;
}
}
}
var z = new Zombie(100, 200,);
var zombieList = [];
for (var i = 0; i < 10; i++) {
zombieList.push(new Zombie(40 * i, 100));
}
call your draw function inside loop, after creating object.
DEMO
var ctx = document.getElementById('c').getContext('2d');
var FatZombieWikki = new Image();
FatZombieWikki.src = "//i.stack.imgur.com/ubK40.jpg";
FatZombieWikki.onload = function(){
var zombieList = [];
for (var i = 0; i < 10; i++) {
zombieList.push(new Zombie(40 * i, 30*i));
zombieList[i].draw(ctx);
}
}
var Zombie = function(x, y) {
this.x = x;
this.y = y;
this.draw = function(ctx) {
ctx.drawImage(FatZombieWikki,this.x,this.y,50,50);
}
}
canvas{
border:2px solid #000
}
<canvas id='c' width=500 height=400></canvas>
zombieList.forEach(zombie => zombie.Draw(ctx))
Related
I am making a tile based game with a traditional method(two for loops) and i am trying to write collision detection but nothing works. I want the blue square to stay in the screen and be on top of the tiles after you hit start. I have encountered a virus looking for a solution. Please help me stack overflow community.
The code:
const context = document.getElementById("canvas").getContext('2d');
const person = new rectangle(100,100,20,20,'blue');
setInterval(update_all,10);
var next_block_x = 0;
var next_block_y = 0;
var block_size = 50;
var moving = false;
const tile_map = [
[0,0,0,0,0,0],
[0,0,0,0,0,0],
[1,0,0,0,0,0],
[1,1,0,0,0,0],
[1,1,1,0,0,0],
[1,1,1,1,1,1]
];
function rectangle(x,y,w,h,col){
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.col = col;
this.update = function(){
context.fillStyle = this.col;
context.fillRect(this.x,this.y,this.w,this.h);
context.stroke();
}
}
function block(x,y,col){
this.x = x;
this.y = y;
this.col = col;
context.fillStyle = this.col;
context.fillRect(this.x,this.y,block_size,block_size);
context.stroke();
}
function update_tile_map(){
for(i=0;i<tile_map.length;i++){
for(var j=0;j<tile_map[i].length;j++){
if(tile_map[i][j] == 1){
new block(next_block_x,next_block_y,'red');
}
next_block_x += block_size;
}
next_block_x = 0;
next_block_y += block_size
}
next_block_x = 0;
next_block_y = 0;
}
function clear(){
context.clearRect(0,0,300,300);
}
function start(){
moving = true;
}
function stop(){
moving = false;
}
function update_all(){
clear();
update_tile_map();
person.update();
if(moving != false){
person.y ++;
}
}
#canvas{
background-color:lightgrey;
border: 4px solid grey;
}
<button onclick='start()'>START</button>
<button onclick='stop()'>STOP</button>
<canvas id="canvas" width='300' height='300'></canvas>
You could add an if statement to check if the block has hit the wall:
if (person.y<300) person.y ++; else person.y = 0
const context = document.getElementById("canvas").getContext('2d');
const person = new rectangle(100,100,20,20,'blue');
setInterval(update_all,10);
var block_size = 50;
var moving = false;
const tile_map = [
[1,1,1,1,1,1],
[1,0,0,0,0,1],
[1,0,0,0,0,1],
[1,0,0,0,0,1],
[1,0,0,0,0,1],
[1,1,1,1,1,1]
];
function rectangle(x,y,w,h,col){
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.col = col;
this.update = function(){
context.fillStyle = this.col;
context.fillRect(this.x,this.y,this.w,this.h);
context.stroke();
}
}
function clear(){
context.clearRect(0,0,300,300);
}
function start(){
moving = true;
}
function stop(){
moving = false;
}
function update_all(){
clear();
person.update();
if(moving != false){
if (person.y<300) person.y ++; else person.y = 0
}
}
#canvas{
background-color:lightgrey;
border: 4px solid grey;
}
<button onclick='start()'>START</button>
<button onclick='stop()'>STOP</button>
<canvas id="canvas" width='300' height='300'></canvas>
I am trying to achieve effect as shown in the picture below:
Im using p5.js library but im not a graphics programmer and thats why its very difficult to achieve this particular graphical effect. I am sharing my code with you and also I followed this tutorial.
Index.html
<html>
<head>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.sound.min.js"></script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>
<script language="javascript" type="text/javascript" src="particle.js"></script>
</head>
<body>
</body>
</html>
particle.js
function Particle() {
this.pos = createVector(random(width), random(height));
this.vel = createVector(0, 0);
this.acc = createVector(0, 0);
this.maxspeed = 4;
this.h = 0;
this.alphaPower = 20;
this.prevPos = this.pos.copy();
this.update = function() {
this.vel.add(this.acc);
this.vel.limit(this.maxspeed);
this.pos.add(this.vel);
this.acc.mult(0);
}
this.follow = function(vectors) {
var x = floor(this.pos.x / scl);
var y = floor(this.pos.y / scl);
var index = x + y * cols;
var force = vectors[index];
this.applyForce(force);
}
this.applyForce = function(force) {
this.acc.add(force);
}
this.showBlue = function() {
stroke(0, 76, 153, this.alphaPower);
strokeWeight(1);
line(this.pos.x, this.pos.y, this.prevPos.x, this.prevPos.y);
this.updatePrev();
}
this.showMaroon = function() {
stroke(165, 0, 68, this.alphaPower); // maroon
strokeWeight(1);
line(this.pos.x, this.pos.y, this.prevPos.x, this.prevPos.y);
this.updatePrev();
}
this.showYellow = function() {
stroke(237, 188, 0, this.alphaPower);
//stroke(1,2);
strokeWeight(1);
line(this.pos.x, this.pos.y, this.prevPos.x, this.prevPos.y);
this.updatePrev();
}
this.updatePrev = function() {
this.prevPos.x = this.pos.x;
this.prevPos.y = this.pos.y;
}
this.edges = function() {
if (this.pos.x > width) {
this.pos.x = 0;
this.updatePrev();
}
if (this.pos.x < 0) {
this.pos.x = width;
this.updatePrev();
}
if (this.pos.y > height) {
this.pos.y = 0;
this.updatePrev();
}
if (this.pos.y < 0) {
this.pos.y = height;
this.updatePrev();
}
}
}
sketch.js
var inc = 0.01;
var scl = 10;
var cols, rows;
var zoff = 0;
var fr;
var particles = [];
var particlesMaroon = [];
var particlesBlue = [];
var particlesYellow = [];
var flowfield;
var flowfieldMaroon;
var flowfieldBlue;
var flowfieldYellow;
var gamma_is_high = false;
var beta_is_high = false;
var alpha_is_high = false;
var maroon_data=1000;
var blue_data = 1000;
var yellow_data = 1000;
setInterval(function() {
ChangeLines();
}, 5000);
function dataRequest(){
socket.emit('datarequest', {data: "request"});
}
function ChangeLines(){
maroon_data = random(500, 2000);
blue_data = random(500, 2000);
yellow_data = random(500, 2000);
gamma_is_high = true;
alpha_is_high = true;
beta_is_high = true;
}
function setup() {
slider = createSlider(0.01, 0.1, 0.02,0);
slider.position(10, 10);
slider.style('width', '80px');
ChangeLines();
createCanvas(windowWidth-15, windowHeight-20);
cols = floor(width / scl);
rows = floor(height / scl);
fr = createP('');
flowfield = new Array(cols * rows);
flowfieldMaroon = new Array(cols * rows);
flowfieldBlue = new Array(cols * rows);
flowfieldYellow = new Array(cols * rows);
for (var i = 0; i < 1000; i++) {
particles[i] = new Particle();
particlesMaroon[i] = new Particle();
particlesBlue[i] = new Particle();
particlesYellow[i] = new Particle();
}
background(255);
}
function draw() {
let val = slider.value();
inc = val;
var yoff = 0;
for (var y = 0; y < rows; y++) {
var xoff = 0;
for (var x = 0; x < cols; x++) {
var index = x + y * cols;
var angle = noise(xoff, yoff, zoff) * TWO_PI;
var angleMaroon = noise(xoff, yoff, zoff) * TWO_PI;
var angleBlue = noise(xoff, yoff, zoff) * TWO_PI;
var angleYellow = noise(xoff, yoff, zoff) * TWO_PI;
var v = p5.Vector.fromAngle(angle);
var vm = p5.Vector.fromAngle(angleMaroon);
var vb = p5.Vector.fromAngle(angleBlue);
var vy = p5.Vector.fromAngle(angleYellow);
v.setMag(5);
vm.setMag(5);
vb.setMag(5);
vy.setMag(5);
flowfield[index] = v;
flowfieldMaroon[index] = vm;
flowfieldBlue[index] = vb;
flowfieldYellow[index] = vy;
xoff += inc;
}
yoff += inc;
}
zoff += 0.0003;
for (var i = 0; i < particles.length; i++) {
if(gamma_is_high==true){
particlesMaroon[i].follow(flowfieldMaroon);
particlesMaroon[i].update();
particlesMaroon[i].edges();
particlesMaroon[i].showMaroon();
}
if(beta_is_high){
particlesBlue[i].follow(flowfieldBlue);
particlesBlue[i].update();
particlesBlue[i].edges();
particlesBlue[i].showBlue();
}
if(alpha_is_high){
particlesYellow[i].follow(flowfieldYellow);
particlesYellow[i].update();
particlesYellow[i].edges();
particlesYellow[i].showYellow();
}
}
fr.html(floor(frameRate()));
}
The variables maroon_data, blue_dataand yellow_data are data coming from EEG device which will be calculated later but for now its hard coded values for prototype only. Also booleans gamma_is_high, beta_is_high and alpha_is_high are set to true for now. But with this much effort I only manage to achieve this as shown below:
And the actual output is like this:
Kindly help me get this actual output. Any help would be appreciated. Thanks.
Ive sorta done this before. I only had one array of particles and just changed their rgb values by a small random amount. I used an object to store the colour values.
function setup() {
//Do all the normal stuff
var c = {r: 100, g:100, b:100)
}
function draw() {
//All the other stuff
c.r += random(-3,3);
c.g += random(-3,3);
c.b += random(-3,3);
}
And then in the particle:
show() {
fill(c.r,c.g,c.b, whateverAlphaYouWant);
//Do all the rest
}
You can always tweak the values to get whatever colour you want.
I was wondering what I was doing wrong because I'm making a memory game but the images wouldn't draw on my canvas.
var ctx;
var cardBacks = "Resources/monster.png"; //shows back of card when turned over
var faces = [];
var tiles = [];
var Tile;
var columns = 5;
var rows = 4;
function createTile(x,y){
this.x = x;
this.y = y;
this.width = 70;
ctx.drawImage(cardBacks, this.x, this.y, this.width, this.width);
}
function initialize(){
ctx = document.getElementById("myCanvas").getContext("2d");
for (var i = 0; i < columns; i++) {
for (var j = 0; j < rows; j++) {
tiles.push(createTile(i * 78 + 10, j * 78 + 40));
}
}
}
Try this code with onload callback function.
var ctx;
var cardBacks = new Image();
cardBacks.src = "Resources/monster.png"; //shows back of card when turned over
cardBacks.onload = function() {
ctx.drawImage(cardBacks, this.x, this.y, this.width, this.width);
}
var faces = [];
var tiles = [];
var Tile;
var columns = 5;
var rows = 4;
function createTile(x, y) {
this.x = x;
this.y = y;
this.width = 70;
}
function initialize() {
ctx = document.getElementById("myCanvas").getContext("2d");
for (var i = 0; i < columns; i++) {
for (var j = 0; j < rows; j++) {
tiles.push(createTile(i * 78 + 10, j * 78 + 40));
}
}
}
You need to draw an HTML image element onto the canvas, not a url. I think you could do
var cardBacks = new Image();
cardBacks.src = "Resources/monster.png";
Here's an example: https://jsfiddle.net/yarhqskx/
Here's with multiple (added onload): https://jsfiddle.net/yarhqskx/7/
I'm trying to make a game in HTML5 and I'm having trouble loading image assets. My issue is that the onload event of the code isn't firing and so the boolean isn't changing.
var c = document.getElementById("gamearea");
var gs = c.getContext("2d");
var one_x = 0;
//Sprite Loading//
function sprite(src,x, y, width, height, frames, levels) {
this.sprite = Image();
this.sprite.src = src;
this.x = x;
this.y = y;
this.w = width;
this.h = height;
this.f = frames;
this.l = levels;
this.cf = 0;
this.cl = 0;
this.loaded = false;
this.src = src;
}
sprite.prototype.draw = function () {
if (this.loaded) {
document.getElementById("ass").innerHTML = "Ass";
gs.drawImage(this.src, this.x, this.y);
}
}
dog = new sprite("/images/sDog.png", 10, 10, 10, 10, 1, 1);
dog.sprite.onload = function () {
alex.loaded = true;
}
setInterval(alex.draw, 30);
I would suggest putting the onload event before the set event for your dog sprite image object. I see that you set everything in the constructor, but I would suggest against that.
In you current code you object is being loaded before the line that initializes the onload event.
I have seen this a lot with loading images, I would do something like this.
function sprite(src,x, y, width, height, frames, levels) {
var self = this;
self.sprite = new Image();
self.init = function(){
self.sprite.src = src;
self.x = x;
self.y = y;
self.w = width;
self.h = height;
self.f = frames;
self.l = levels;
self.cf = 0;
self.cl = 0;
self.loaded = false;
self.src = src;
}
}
dog = new sprite();
dog.sprite.onload = function () {
alex.loaded = true;
}
dog.init("/images/sDog.png", 10, 10, 10, 10, 1, 1);
setInterval(alex.draw, 30);
or, to get a little fancier
function sprite(src,x, y, width, height, frames, levels, onLoad) {
var self = this;
self.sprite = new Image();
self.sprite.onload = function(){
onLoad();
}
self.sprite.src = src;
self.x = x;
self.y = y;
self.w = width;
self.h = height;
self.f = frames;
self.l = levels;
self.cf = 0;
self.cl = 0;
self.loaded = false;
self.src = src;
}
dog = new Sprite("/images/sDog.png", 10, 10, 10, 10, 1, 1, function(){
alex.loaded = true;
});
setInterval(alex.draw, 30);
after looking at your fiddle
var c = document.getElementById("gamearea");
var gs = c.getContext("2d");
var one_x = 0;
//Sprite Loading//
function sprite(src, x, y, width, height, frames, levels, loaded) {
var self = this;
self.sprite = new Image();
self.sprite.onload = function(){
self.loaded = true;
}
self.sprite.src = src;
self.x = x;
self.y = y;
self.w = width;
self.h = height;
self.f = frames;
self.l = levels;
self.cf = 0;
self.cl = 0;
self.loaded = false;
self.src = src;
self.update = function () {
one_x += 1;
gs.fillStyle = "white";
gs.fillRect(0, 0, 1000, 10000);
gs.fillStyle = "black";
gs.fillRect(one_x, 20, 10, 10);
}
self.draw = function (){
if (self.loaded) {
document.getElementById("ass").innerHTML = "Ass";
gs.drawImage(self.sprite, self.x, self.y);
}
}
}
dog = new sprite("http://www.bit-101.com/blog/wp-content/uploads/2009/05/ball.png", 10, 10, 10, 10, 1, 1);
setInterval(dog.draw, 30);
You're missing new here:
this.sprite = Image();
Try:
this.sprite = new Image();
Also make sure that the image file actually exists in the given location.
Code:
function SnakeGame() {
"use strict";
/***** Constant & Global Variables ***********************************/
var canvas = $("#canvas")[0];
var ctx = canvas.getContext('2d');
var width = $("#canvas").width();
var height = $("#canvas").height();
var snake, food;
function Snake() {
var startLength = 5; // default for starting size of snake
this.body = [];
this.chgStartLength = function(length) {
startLength = length;
};
this.create = function() {
var i;
for(i=0; i>5; i++) {
this.body.push({x:i, y:0});
}
};
}
var paintCanvas = function() {
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, width, height);
ctx.strokeStyle = 'black';
ctx.strokeRect(0, 0, width, height);
};
var paintFrame = function() {
var i, length = snake.body.length;
for(i=0; i<length; i++) {
var cell = snake.body[i];
ctx.fillStyle = 'black';
ctx.fillRect(cell.x*10, cell.y*10, 10, 10);
ctx.strokeStyle = 'white';
ctx.strokeRect(cell.x*10, cell.y*10, 10, 10);
}
};
this.start = function() {
snake = new Snake();
snake.create();
paintCanvas();
paintFrame();
console.log(snake.body); //for testing
};
}
For some reason snake.body is an empty array even after start is executed.
for(i=0; i>5; i++) {
That > is facing in the wrong direction, I believe.
for(i = 0; i < 5; i++) {